<template>
  <div class="gender">
    <div class="gender-title"> 用户画像分析 </div>
    <div>
      <div class="cover">
        <div class="item">客源分析：</div>
        <div class="item"
          ><div> 小程序 </div><div>{{ orderType.miniAppClientNum * dictValue }}</div></div
        >
        <div class="item"
          ><div> 设备 </div><div>{{ orderType.deviceClientNum * dictValue }}</div></div
        >
      </div>
      <div class="gender-box">
        <img src="../../assets/images/chart-bg.png" alt="" srcset="" />
        <div class="man">
          <div class="com-chart" ref="chart_ref"></div>
        </div>
      </div>
      <div class="legend">
        <div class="item" v-for="item in options" :key="item.name">
          <div class="icon" :style="{ background: item.color }"></div>
          <div>{{ item.name }} {{ item.value }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { basicInfiApi } from '@/api/statistic'
import usePermissionStore from '@/store/modules/permission'
import { divide, mul } from '@/utils/tools'
import * as echarts from 'echarts'
const chart_ref = ref(null)
const chartInstance = ref(null)

const initOption = ref({})
// 初始化echartInstance
function initChart() {
  chartInstance.value = echarts.init(chart_ref.value, 'chalk')
  // 对图标初始化配置的控制
  initOption.value = {
    hover: {
      mode: null
    },
    title: {
      text: '交易总人数',
      subtext: '88%',
      left: 'center',
      top: '33%',
      textStyle: {
        fontSize: 11,
        color: '#fff',
        align: 'center'
      },
      subtextStyle: {
        fontFamily: '微软雅黑',
        fontSize: 26,
        color: '#fff'
      }
    },
    series: [
      {
        emphasis: {
          disabled: true
        },
        type: 'pie',
        hoverAnimation: false,
        avoidLabelOverlap: false,
        radius: ['60%', '80%'],
        data: [
          {
            value: 1048,
            name: '女性',
            itemStyle: {
              color: {
                type: 'linear',
                colorStops: [
                  { offset: 0, color: 'rgba(54, 134, 255, 0.05)' },
                  { offset: 1, color: 'rgba(54, 134, 255, 1)' }
                ],
                globalCoord: true
              },
              borderCap: 'round',
              borderRadius: '100%',
              borderWidth: 10 //边框的宽度
            },
            label: {
              show: false
            }
          },
          {
            value: 735,
            name: '男性',
            itemStyle: {
              color: {
                type: 'linear',
                colorStops: [
                  { offset: 0, color: 'rgba(0, 237, 238, 1)' },
                  { offset: 1, color: 'rgba(0, 237, 238, 0.07)' }
                ],
                globalCoord: true
              },
              borderCap: 'round',
              borderRadius: '100%',
              borderWidth: 10 //边框的宽度
            },
            label: {
              show: false
            }
          }
        ]
      }
    ]
  }
  chartInstance.value.setOption(initOption.value)
}
// 更新图表
const loading = ref(true)
const orderType = ref({})
const dictValue = ref(1)
const options = ref([])
function updateChart() {
  basicInfiApi().then((res) => {
    orderType.value = res?.data?.orderType || {}
    console.log('res.data.series', res.data.clientType)
    dictValue.value = localStorage.getItem('dictValue')
    const womanCount = res?.data.clientType.find((i) => i.sex == '女')?.count
    const manCount = res?.data.clientType.find((i) => i.sex == '男')?.count
    options.value = [
      {
        value: mul(divide(manCount, womanCount + manCount).toFixed(4), 100) + '%',
        name: '男性',
        color: '#01DEE0'
      },
      {
        value: mul(divide(womanCount, womanCount + manCount).toFixed(4), 100) + '%',
        name: '女性',
        color: '#317BE9'
      }
    ]
    const dataOption = {
      series: [
        {
          data: [
            {
              ...initOption.value.series[0].data[0],
              value: res?.data.clientType.find((i) => i.sex == '女')?.count,
              name: '女性'
            },
            {
              ...initOption.value.series[0].data[1],
              value: res?.data.clientType.find((i) => i.sex == '男')?.count,
              name: '男性'
            }
          ]
        }
      ]
    }
    chartInstance.value.setOption(dataOption)
    loading.value = false
  })
}
const timer = ref(null)
onUnmounted(() => {
  clearInterval(timer.value)
})
onMounted(() => {
  const flag = usePermissionStore().routes.find((i) => i.name == 'Screen')
  if (!flag) {
    return
  }
  loading.value = true
  initChart()
  updateChart()
  timer.value = setInterval(() => {
    updateChart()
  }, 30000)
})
onActivated(() => {
  const flag = usePermissionStore().routes.find((i) => i.name == 'Screen')
  if (!flag) {
    return
  }
  loading.value = true
  updateChart()
  timer.value = setInterval(() => {
    updateChart()
  }, 30000)
})

onDeactivated(() => {
  clearInterval(timer.value)
})
</script>

<style lang="scss" scoped>
.chart-box {
  width: 100%;
  height: 100%;
}
.com-chart {
  width: 100%;
  height: 100%;
}
.gender {
  margin-top: 138px;
  position: relative;
  width: 332px;
  .cover {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 104px;
    height: 74px;
    z-index: 2;
    background: linear-gradient(
      180deg,
      #043c95 0%,
      rgba(4, 33, 68, 0.74) 14%,
      rgba(4, 23, 62, 0.8) 51%,
      rgba(7, 45, 94, 0.77) 88%,
      #043e97 100%
    );
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #00d5fc;
    .item {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: #ffffff;
      line-height: 12px;
    }
  }
  border-radius: 0px 0px 0px 0px;
  // width: 30vw;
  .gender-title {
    padding-left: 40px;
    width: 332px;
    height: 38px;
    color: #fff;
    font-family: 'HarmonyOS Sans SC';
    font-size: 20px;
    font-weight: bold;
    line-height: 38px; /* 92.308% */
    background-image: url('../../assets/images/title-l-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-bottom: 20px;
  }
}
.gender-box {
  flex-shrink: 0;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 157px;
    height: 152px;
  }
  .man {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
}
.legend {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  font-family: HarmonyOS Sans SC;
  margin-top: 14px;
  .item {
    display: flex;
    align-items: center;
    &:last-of-type {
      margin-left: 23px;
    }
  }
  .icon {
    width: 10px;
    height: 10px;
    margin-right: 2px;
  }
}
</style>
